<template>
    <div class="page-common-layout">
        <div class="page-common-content">
            <tool-bar @search="$refs.table.refresh(true)"
                @reset="() => { (this.queryParam = {}), $refs.table.refresh(true); }">
                <template slot="toolBtn" slot-scope="scope">
                    <a-button class="cu-btn-primary" icon="plus" @click="handleAdd()">新建</a-button>
                </template>
                <template slot="toolForm">
                    <a-form-item label="应用类型">
                        <a-select placeholder="请选择应用类型" style="width: 195px;" v-model="queryParam.configType">
                            <a-select-option value="2">
                                阿里钉钉
                            </a-select-option>
                        </a-select>
                    </a-form-item>
                </template>
            </tool-bar>
            <DataGrid ref="table" :columns="columns" :url="url" :queryParam="queryParam" rowKey="uuid"
                :showRowSelect="false">
                <span slot="renderType" slot-scope="{ text, record }">
                    <a-tag :color="text === 1 || text === '1' ? 'green' : 'blue'">
						{{ text === 1 || text === "1" ? '企业微信' : '阿里钉钉' }}
					</a-tag>
                </span>
                <span slot="renderSyncAction" slot-scope="{ text, record }">
                    <a @click="() => syncResult(record)">同步结果</a>
                </span>
                <span slot="renderAction" slot-scope="{ text, record }">
                    <a @click="() => handleEdit(record)">编辑</a>
                    <span class="action-margin"></span>
                    <a @click="() => handleSub(record)" class="action-delete">删除</a>
                    <span class="action-margin"></span>
                    <a @click="() => handleSynchronization(record)">同步</a>
                </span>
            </DataGrid>
            <edit-form
                ref="createModal"
                :visible="visible"
                :loading="confirmLoading"
                :model="mdl"
                :type="cardType"
                @cancel="handleCancel()"
                @ok="handleOk"
            />
            <!-- 选择三方应用 -->
            <card-modal 
                :visible="cardVisible"
                @click="openPage"
				@cancel="() => cardVisible = false"
            />
            <!-- 同步结果 -->
            <sync-result-modal 
                :visible="syncResultVisible"
                :dataSource="syncDataSource"
                @ok="() => syncResultVisible = false"
                @cancel="() => syncResultVisible = false"
            />
            <!-- 同步三方应用 -->
            <synchronization-modal 
                :visible="syncVisible"
                :model="syncModel"
                @ok="() => syncVisible = false"
                @cancel="() => syncVisible = false"
            />
        </div>
    </div>
</template>

<!--script-->
<script>
import { DataGrid } from "@/components";
import { dataGridMixin } from "@/mixins/dataGridMixin";
import editForm from "./edit.vue";
import cardModal from "./cardModal.vue";
import syncResultModal from "./syncResultModal.vue";
import synchronizationModal from "./synchronizationModal.vue";
export default {
    name: "Table",
    components: {
        editForm,
        DataGrid,
        cardModal,
        syncResultModal,
        synchronizationModal,
    },
    mixins: [dataGridMixin],
    filters: {},
    data() {
        return {
            columns: [
                {
                    title: "企业号ID",
                    dataIndex: "agentId"
                },
                {
                    title: "三方密钥",
                    dataIndex: "appKey"
                },
                {
                    title: "应用类型",
                    align: "center",
                    dataIndex: "configType",
                    scopedSlots: { customRender: "renderType" }
                },
                {
                    title: "同步结果",
                    align: "center",
                    dataIndex: "syncAction",
                    width: 100,
                    scopedSlots: { customRender: "renderSyncAction" }
                },
                {
                    title: "操作",
                    align: "center",
                    dataIndex: "action",
                    width: 150,
                    scopedSlots: { customRender: "renderAction" }
                }
            ],
            visible: false,
            visibleFile: false,
            confirmLoading: false,
            mdl: null,
            // 查询参数
            queryParam: {},
            url: {
                getPageSet: '/mdata/mdataThirdConfig/getPageSet',
                save: '/mdata/mdataThirdConfig/save',
                update: '/mdata/mdataThirdConfig/update',
                getDetailByUuid: '/mdata/mdataThirdConfig/getDetailByUuid',
                deleteBatch: '/mdata/mdataThirdConfig/deleteBatch'
            },
            cardVisible: false,
            cardType: '',
            syncVisible: false,
            syncModel: {},
            syncResultVisible: false,
            syncDataSource: [],
        };
    },
    methods: {
        syncResult(record) {
            this.$post('/mdata/mdataThirdInfo/getSynchronousDataByUuid',{uuid : record.uuid}).then(res => {
                if (res.statusCode === 200) {
                    this.syncDataSource = res.data;
                } else {
                    this.$message.error(res.message ? res.message : '获取数据失败', 1.5);
                }
                this.syncResultVisible = true;
            })
        },
        handleAdd() {
            this.cardVisible = true;
        },
        handleEdit(record) {
            this.$post(this.url.getDetailByUuid,{uuid: record.uuid}).then(res => {
                if (res.statusCode === 200) {
                    this.mdl = res.data;
                    this.visible = true;
                    if (this.$refs.createModal.edit) this.$refs.createModal.edit(this.mdl);
                    this.$refs.createModal.title = res.data.configType === '1' ? '编辑企业微信配置' : '编辑阿里钉钉配置';
                } else {
                    this.$message.error(res.$message ? res.$message : '请求数据失败');
                }
            })
        },
        handleSynchronization(record) {
            this.syncModel = record;
            this.syncVisible = true;
        },
        openPage(val) {
            this.cardVisible = false;
            this.cardType = val;
            this.$refs.createModal.title = val === '1' ? '新建企业微信配置' : '新建阿里钉钉配置';
            this.$refs.createModal.setType();
            this.visible = true;
        },
    }
};
</script>

<!--style-->
<style scoped lang="less">
.table {
    background-color: @base-bg-color;
    padding: 24px;
}

/deep/.ant-btn-link {
    border: none !important;
}
</style>
